<template>
    <NavBar @update:searchName="searchEvent"></NavBar>
    <div id="map"></div>
</template>

<script setup>
import NavBar from "../components/NavBar.vue";
import { onMounted, ref, toValue, watch } from "vue";
import { app } from "../main.js";
import Query from '../utils/Query.js'
import setCanvasStyle from '../utils/setCanvasStyle-animate.js';

/* global ol */
const gaode = new ol.layer.Tile({
    title: "gaode_vector",
    source: new ol.source.XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        wrapX: false,
        crossOrigin: "anonymous", // 设置跨域属性为匿名
    }),
});
const image = new ol.layer.Tile({
    title: "image_vector",
    source: new ol.source.XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
        wrapX: false,
        crossOrigin: "anonymous", // 设置跨域属性为匿名
    }),
});
const docLayer = new Zondy.Map.Doc("", "guanggu-doc", {
    title: "guanggu",
    // 设置跨域属性为匿名
    crossOrigin: "anonymous",
});
let map;
onMounted(() => {
    /*1. 初始化地图 */
    map = new ol.Map({
        target: "map",
        layers: [image, gaode, docLayer],
        view: new ol.View({
            projection: "EPSG:4326",
            center: [114.35, 30.5],
            zoom: 13,
        }),
    });
    app.provide("$map", map);
});


// 查询事件处理函数
// 定义高亮图层的数据源
const high_source = new ol.source.Vector({});
const searchEvent = (newValue) => {
    let service = {
        name: "guanggu-doc",
        layerId: 2,
    };

    const high_layer = new ol.layer.Vector({
        source: high_source,
        style: setCanvasStyle(map, 20),
    });
    map.addLayer(high_layer);

    let keyword = newValue;

    // 执行查询
    Query.queryByAttr({
        keyword,
        service,
        callback: handleQuery,
    });
};
function handleQuery(data) {
    /* mapgis */
    console.log(data);
    high_source.clear();
    /* mapgis-ol */
    var format = new Zondy.Format.PolygonJSON();
    // 将MapGIS要素JSON反序列化为ol.Feature类型数组
    var features = format.read(data);
    high_source.addFeatures(features);
}
</script>

<style scoped>
#map {
    width: 100vw;
    height: calc(100vh - 25px);
}
</style>